<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{ pageTitle }}
        <span class="text-subtitle1">列表</span>
      </div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="searchBarVisibility"></search-bar-toggle-btn>
    </div>
    <!-- 查询菜单 -->
    <div class="q-pa-sm shadow-2 q-mb-md items-center" v-show="searchBarVisibility">
      <div class="row q-col-gutter-sm">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">PDS Code</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.pdsCode" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)"></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">Label ID</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.labelId" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)"></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">版本号</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.version" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)"></easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">版本时间戳</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.newVersion" :readonly="listDataLoadingState"
              @keyup.enter="loadListData(2)"></easy-input>
          </div>
        </div>
      </div>
      <div class="row q-pt-sm">
        <div class="q-mr-sm">
          <q-btn :disable="listDataLoadingState" @click="loadListData(2)" color="primary" icon="search" label="查询" />
        </div>
      </div>
    </div>
    <div class="shadow-2">
      <q-table @request="fpsAssist.onDataTableRequest" :rows="$d.tableData" :columns="fpsInfo.columnsInfo"
        separator="cell" row-key="id" v-model:pagination="fpsInfo.paginationInfo"
        :visible-columns="fpsInfo.visibleColumns" dense flat :hide-pagination="true" :loading="listDataLoadingState"
        color="primary" binary-state-sort @row-dblclick="(evt,row)=>{fpsNav.gotoDetail(row.id)}">
        <template v-slot:top="props">
          <!--功能按钮-->
          <div class="q-gutter-sm">
          </div>
          <!--填充所有剩余空间-->
          <q-space />
          <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
            v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
            @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
          <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" :ripple="false"
            :title="props.inFullscreen ? '退出全屏' : '全屏显示'" dense flat @click="props.toggleFullscreen" />
        </template>
        <template v-slot:no-data>
          <span class="full-width text-center"> <q-icon name="error_outline" /> 无数据 </span>
        </template>
        <template v-slot:body-cell-operation="props">
          <q-td :props="props" auto-width>
            <q-btn class="btn-in-row" color="primary" dense label="查看"
              @click="evt=> fpsNav.gotoDetail(props.row.id, evt)" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <paging-bar :loading-state="listDataLoadingState" :pageNo="fpsReq.pageNo" :pageSize="fpsReq.pageSize"
            :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
            @go-to-page="fpsNav.gotoPage" />
        </template>
        <!--状态列插槽-->
        <template v-slot:body-cell-isEnabled="props">
          <q-td :props="props" auto-width>
            <q-badge :color="props.row.isEnabled ? 'positive' : 'grey-6'" :label="props.row.isEnabled ? '有效' : '无效'"
              class="q-mr-xs" />
          </q-td>
        </template>
      </q-table>
    </div>
  </q-page>
</template>
<script lang="ts">
export default {
  name: 'WmInvMoveListStd',
};
</script>
<script lang="ts" setup>
import { ColumnInfo } from '@njt/foundation/defs/comm';
import { reactive, ref } from 'vue';
import { useFpsHelper } from '@njt/foundation/hooks/fpsHelper';
import { useTitleHelper } from '@njt/foundation/hooks/titleHelper';
import {
  GetLabelSkuProcessMasterListReq,
  GetLabelSkuProcessMasterListResp,
  MhlbcLabelSkuProcessMaster,
} from 'src/defs/labelManagement';
// 是否处于数据列表加载的状态
let listDataLoadingState = ref(false);
const pageTitle = '贴标工艺';
useTitleHelper(pageTitle);

// 列参数
const columnsDefine: ColumnInfo[] = [
  {
    label: '操作',
    name: 'operation',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true,
  },
  {
    label: '贴标工艺ID',
    name: 'id',
    field: 'id',
    align: 'left',
    defOrder: 2,
    sortable: true,
    defVisible: true,
  },
  {
    label: 'PDS Code',
    name: 'pdsCode',
    field: 'pdsCode',
    align: 'left',
    defOrder: 3,
    sortable: true,
    defVisible: true,
  },
  {
    label: 'Label ID',
    name: 'labelId',
    field: 'labelId',
    align: 'left',
    defOrder: 4,
    sortable: true,
    defVisible: true,
  },
  {
    label: '版本',
    name: 'version',
    field: 'version',
    align: 'left',
    defOrder: 5,
    sortable: true,
    defVisible: true,
  },
  {
    label: '版本时间戳',
    name: 'newVersion',
    field: 'newVersion',
    align: 'left',
    defOrder: 6,
    sortable: true,
    defVisible: true,
  },
  {
    label: '操作实际效率',
    name: 'actualOperationalEfficiency',
    field: 'actualOperationalEfficiency',
    align: 'left',
    defOrder: 7,
    defVisible: true,
  },
  {
    label: '是否有效',
    name: 'isEnabled',
    field: 'isEnabled',
    align: 'left',
    defOrder: 8,
    defVisible: true,
  },
  {
    label: '创建人',
    name: 'createP',
    field: 'createP',
    align: 'left',
    defVisible: true,
    defOrder: 9,
    format: (val: string, row: any) => $f.fmt.userDisp(val, row.createPn),
  },
  {
    label: '创建时间',
    name: 'createDt',
    field: 'createDt',
    align: 'left',
    defVisible: true,
    defOrder: 10,
    format: (val: string) => $f.fmt.dtFmtFullNoSec(val),
  },
  {
    label: '更新时间',
    name: 'updateDt',
    field: 'updateDt',
    align: 'left',
    defOrder: 11,
    sortable: false,
    defVisible: true,
    format: (val: string) => $f.fmt.dtFmtFullNoSec(val),
  },
  {
    label: '更新人',
    name: 'updateP',
    field: 'updateP',
    align: 'left',
    defOrder: 12,
    sortable: false,
    defVisible: true,
    format: (val: string, row: any) => $f.fmt.userDisp(val, row.updatePn),
  },
];

const $d = reactive({
  tableData: [] as MhlbcLabelSkuProcessMaster[],
});
let fpsReq: GetLabelSkuProcessMasterListReq = reactive({
  pdsCode: null,
  labelId: null,
  version: null,
  newVersion: null,
  pageNo: 1,
  pageSize: 40,
  isDescending: false,
  orderBy: null,
});

const loadListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      fpsReq.pageNo = 1;
    }
    if (resetFpsReq >= 2) {
      fpsReq.orderBy = '';
      fpsReq.isDescending = false;
    }
  }
  listDataLoadingState.value = true;
  $f.axios
    .get<GetLabelSkuProcessMasterListResp>(
      '/project/mhlbc/inv/inventory/get-label-sku-process-master-list',
      { params: fpsReq }
    )
    .then((result) => {
      fpsAssist.handleGenericFpsResp(result.data);
      $d.tableData = result.data.mhlbcLabelSkuProcessMasters;
      fpsAssist.saveFpsReq(fpsReq);
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err));
    })
    .finally(() => {
      listDataLoadingState.value = false;
    });
};
const { fpsInfo, fpsAssist, fpsNav, searchBarVisibility } = useFpsHelper(
  'wms/sku/move/',
  '/wms/sku/move/detail',
  '/wms/sku/move/create',
  '/wms/sku/move/edit',
  fpsReq,
  columnsDefine,
  null,
  loadListData
);

</script>
